<template>
<div>
  <input type="hidden" id="theme-name" th:value="${sysSettings.theme}" />
  	<div data-options="region:'north',border:false" class="super-north">
  		<!--顶部-->
  		<div class="super-navigation">
  			<!--系统名称-->
  			<div class="super-navigation-title">
  				<img th:src="${sysSettings.siteLogo}" style="height: 36px;" />
  				<span th:text="${sysSettings.siteName}">大庆金桥软件开发平台</span>
  			</div>
  			<!--自定义导航-->
  			<div class="super-navigation-main">
  				<div class="super-setting-left">
  				<!--
  					<ul>
  						<li><i class="fa fa-commenting-o"></i>消息</li>
  						<li><i class="fa fa-envelope-o"></i>邮件</li>
  						<li><i class="fa fa-bell-o"></i>通知</li>
  					</ul>
  				-->
  				</div>
  				<div class="super-setting-right">
  					<ul>
  						<li>
  							<div class="user-head-image-container">
  								<img id="index-user-head-image" th:if="${session.currentUser.headImage != null && session.currentUser.headImage != ''}"
  									th:src="${'data:image/jpeg;base64,' + session.currentUser.headImage}" style="height: 32px;" />
  								<img id="index-user-head-image" th:if="${session.currentUser.headImage == null || session.currentUser.headImage == ''}"
  									src="/global/img/default_user_icon.png" style="height: 32px;" />
  							</div>
  							&nbsp;
  							<span th:text="${session.currentUser.realName}"></span>
  						</li>
  						<li>
  							<div class="super-setting-icon">
  								<i class="fa fa-gears"></i> 设置
  							</div>
  							<div id="mm" class="easyui-menu">
  								<div onclick="editProfile();">个人信息</div>
  								<div onclick="openEditPasswordDialog();">修改密码</div>
  								<div class="menu-sep"></div>
  								<div id="themeSetting">主题</div>
  							</div>
  						</li>
  						<li>
  							<div id="logout"><i class="fa fa-sign-out"></i> 注销</div>
  						</li>
  					</ul>
  				</div>
  			</div>
  		</div>
  	</div>
  	<div data-options="region:'west',border:false,title:'系统菜单', iconCls:'fa fa-list-ul'" class="super-west">
  		<!--左侧导航-->
  		<div class="easyui-accordion" data-options="border:false,fit:true,selected:true">
  			<div th:each="m,mStat:${firstLevelModels}" th:title="${m.menu.name}" style="overfloat:auto;padding:0;"
  				th:attr="iconCls=|${m.menu.icon}|">
  				<ul th:id="'menu_tree_' + ${m.menu.id}" class="easyui-tree"></ul>
  			</div>
  		</div>
  	</div>
  	<div data-options="region:'center'" style="padding-top: 2px;">
  		<!--主要内容-->
  		<input type="hidden" id="default-menu-name" th:value="${sysSettings.defaultMenuName}" />
  		<input type="hidden" id="default-menu-icon" th:value="${sysSettings.defaultMenuIcon}" />
  		<input type="hidden" id="default-menu-url" th:value="${sysSettings.defaultMenuUrl}" />
  		<input type="hidden" id="default-menu-integrate-type" th:value="${sysSettings.defaultMenuIntegrateType}" />
  		<div id="content-tabs" class="easyui-tabs" data-options="border:false,fit:true,onContextMenu:tabContextMenuClicked">
  		<!--
  			<div th:attr="title=|${sysSettings.defaultMenuName}|, iconCls=|${sysSettings.defaultMenuIcon}|, href=|${sysSettings.defaultMenuUrl}|"
  				data-options="selected:true">
  			</div>
  		-->
  		</div>
  	</div>
  	<div data-options="region:'south'" class="super-south">
  		<!--页脚-->
  		<div class="super-footer-info">
  			<span><i class="fa fa-copyright"></i> CopyRight 2020 版权所有 <i class="fa fa-caret-right"></i></span>
  		</div>
  	</div>

  	<!--主题设置弹窗-->
  	<div id="win">
  		<div class="themeItem">
  			<ul>
  				<li th:class="${sysSettings.theme == 'superGreen'} ? themeActive : ''">
  					<div class="superGreen" style="background: #1abc9c;">green</div>
  				</li>
  				<li th:class="${sysSettings.theme == 'superBlue'} ? themeActive : ''">
  					<div class="superBlue" style="background: #3498db;">blue</div>
  				</li>
  				<li th:class="${sysSettings.theme == 'superGray'} ? themeActive : ''">
  					<div class="superGray" style="background: #95a5a6;">gray</div>
  				</li>
  				<li th:class="${sysSettings.theme == 'superAmethyst'} ? themeActive : ''">
  					<div class="superAmethyst" style="background: #9b59b6;">amethyst</div>
  				</li>
  				<li th:class="${sysSettings.theme == 'superBlack'} ? themeActive : ''">
  					<div class="superBlack" style="background: #34495e;">black</div>
  				</li>
  				<li th:class="${sysSettings.theme == 'superYellow'} ? themeActive : ''">
  					<div class="superYellow" style="background: #e67e22;">yellow</div>
  				</li>
  				<li th:class="${sysSettings.theme == 'superEmerald'} ? themeActive : ''">
  					<div class="superEmerald" style="background: #2ecc71;">emerald</div>
  				</li>
  				<li th:class="${sysSettings.theme == 'superRed'} ? themeActive : ''">
  					<div class="superRed" style="background: #e74c3c;">red</div>
  				</li>
  			</ul>
  		</div>
  	</div>

  	<!-- 修改密码对话框 -->
  	<div id="edit-user-password-dialog" class="edit-dialog">
  		<div class="table-container">
  			<form id="edit-user-password-form" method="post">
  				<table class="edit-table">
  					<tr>
  						<th>原密码：</th>
  						<td>
  							<input class="easyui-passwordbox" name="oldPassword" data-options="required:true,width:240" />
  						</td>
  					</tr>
  					<tr>
  						<th>新密码：</th>
  						<td>
  							<input class="easyui-passwordbox" id="myNewpassword" name="newPassword" data-options="required:true,width:240" />
  						</td>
  					</tr>
  					<tr>
  						<th>确认密码：</th>
  						<td>
  							<input class="easyui-passwordbox" data-options="required:true,equals:['#myNewpassword'],width:240,showEye:true" />
  						</td>
  					</tr>
  				</table>
  			</form>
  		</div>
  	</div>

  	<!-- tabs右键菜单 -->
  	<div id="tabs-context-menu" class="easyui-menu" data-options="onClick:tabContextMenuItemClicked">
  		<div iconCls="fa fa-refresh">刷新</div>
  		<div class="menu-sep"></div>
  		<div iconCls="fa fa-remove">关闭</div>
  		<div iconCls="fa fa-remove">关闭活动页</div>
  		<div>关闭其他页</div>
  		<div>关闭所有页</div>
  	</div>
  </div>
</template>

<script>
  $(function() {
  	setInterval("getMessage()", 10000);

  	//初始化默认首页
  	var defaultMenuUrl = $("#default-menu-url").val();
  	if (defaultMenuUrl != ""){
  		addTab($("#default-menu-name").val(), defaultMenuUrl, $("#default-menu-icon").val(), $("#default-menu-integrate-type").val());
  	}

  	//初始化修改密码对话框
  	$("#edit-user-password-dialog").dialog({
  		title: '修改密码',
  		width: 630,
  		height: 260,
  		closed: true,
  		cache: false,
  		modal: true,
  		iconCls: "fa fa-pencil-square-o",
  		buttons: [
  			{ text: '保存', iconCls: 'fa fa-save', handler: submitEditPasswordForm },
  			{ text: '关闭', iconCls: 'fa fa-close', handler: function(){ $("#edit-user-password-dialog").dialog('close'); } }
  		]
  	});

  	//初始化首页菜单树
  	$.ajax({
  		url: '/desktop/getMenuTrees',
  		type: 'get',
  		dataType: 'json',
  		success: function(data){
  			$.each(data, function(i, n){
  				$("#menu_tree_" + i).tree({
  					data: n,
  					animate: true,
  					onClick: function(node){
  						var attributes = node.attributes;
  						var url = attributes.url;
  						var menuId = attributes.menuId;
  						var integrateType = attributes.integrateType;
  						if (url != null && url != ''){
  							if (url.indexOf("?") == -1){
  								url += "?menuId=" + menuId;
  							} else {
  								url += "&menuId=" + menuId;
  							}
  							addTab(node.text, url, node.iconCls, integrateType);
  						} else {
  							$(this).tree("toggle", node.target);
  						}
  					}
  				});
  			});
  		}
  	});

  	// 退出系统
  	$("#logout").on('click', function() {
  		$.messager.confirm('注销确认', '您是否确认要退出当前系统？', function(r){
  			if (r){
  				window.location.href = "/logout";
  			}
  		});
  	});

  	// 设置按钮的下拉菜单
  	$('.super-setting-icon').on('click', function() {
  		$('#mm').menu('show', {
  			top: 50,
  			left: document.body.scrollWidth - 160
  		});
  	});

  	// 修改主题
  	$('#themeSetting').on('click', function() {
  		var themeWin = $('#win').dialog({
  			width: 460,
  			height: 260,
  			modal: true,
  			title: '主题设置',
  			buttons: [{
  				text: '保存',
  				id: 'btn-sure',
  				handler: function() {
  					themeWin.panel('close');
  					// css
  					var themeName = $(".themeItem ul li.themeActive>div").attr('class');
  					initTheme(themeName);
  					saveTheme(themeName);
  				}
  			}, {
  				text: '关闭',
  				handler: function() {
  					themeWin.panel('close');
  				}
  			}],
  			onOpen: function() {
  				$(".themeItem").show();
  			}
  		});
  	});

  	// 初始化主题
  	var initTheme = function(themeName) {
  		if(themeName == null) {
  			themeName = $('#themeCss').attr('href').split('/').pop().split('.css')[0];
  			// 添加勾选状态
  			$(".themeItem ul li").removeClass('themeActive');
  			$('.themeItem ul li .' + themeName).parent().addClass('themeActive');
  			return;
  		}
  		var themeUrl = $('#themeCss').attr('href').split('/');
  		themeUrl.pop();
  		$('#themeCss').after('<link rel="stylesheet" href="' + themeUrl.join('/') + '/' + themeName + '.css" id="themeCss">');
  		$('#themeCss').remove();

  		// 添加勾选状态
  		$(".themeItem ul li").removeClass('themeActive');
  		$('.themeItem ul li .' + themeName).parent().addClass('themeActive');
  	}

  	//勾选主题
  	$(".themeItem ul li").on('click', function() {
  		$(".themeItem ul li").removeClass('themeActive');
  		$(this).addClass('themeActive');
  	});
  });

  //添加标签页
  function addTab(title, url, icon, integrateType){
  	if (!$("#content-tabs").tabs("exists", title)){
  		if (integrateType == "iframe"){
  			if (url.indexOf("?") == -1){
  				url += "?theme=" + $("#theme-name").val();
  			} else {
  				url += "&theme=" + $("#theme-name").val();
  			}
  			url += "&t=" + new Date().getTime();
  			var content = "<iframe src='"+ url +"' width='100%' height='100%' frameborder='0' scrolling='auto' allowfullscreen='true' webkitallowfullscreen='true' mozallowfullscreen='true'></iframe>";
  			$("#content-tabs").tabs("add", {
  				title: title,
  				content: content,
  				cache: true,
  				iconCls: icon,
  				closable: true
  			});
  		} else {
  			$("#content-tabs").tabs("add", {
  				title: title,
  				href: url,
  				cache: true,
  				iconCls: icon,
  				closable: true
  			});
  		}
  	} else {
  		$("#content-tabs").tabs("select", title);
  	}
  }

  var tabContextMenuClickedTargetName;
  function tabContextMenuClicked(e, title, index){
  	tabContextMenuClickedTargetName = e.target.innerText;
  	e.preventDefault();
  	$("#tabs-context-menu").menu('show', {
  		left: e.pageX,
  		top: e.pageY
  	});
  }

  function tabContextMenuItemClicked(item){
  	if (item.text == '刷新'){
  		refreshTab();
  	} else if (item.text == '关闭'){
  		closeTab();
  	} else if (item.text == '关闭活动页'){
  		closeSelectedTab();
  	} else if (item.text == '关闭其他页'){
  		closeOtherTabs();
  	} else if (item.text == '关闭所有页'){
  		closeAllTabs();
  	}
  }

  function refreshTab(){
  	var tab = $("#content-tabs").tabs("getSelected");
  	var url = $(tab.panel('options')).attr('href');
  	if (url == null){
  		url = $(tab.panel('options').content).attr('src');
  		var content = "<iframe src='"+ url +"' width='100%' height='100%' frameborder='0' scrolling='auto'></iframe>";
  		$('#content-tabs').tabs('update', {
  			tab: tab,
  			options: {
  				content: content
  			}
  		});
  	} else {
  		tab.panel('refresh', url);
  	}
  }

  function closeTab(){
  	var tab = $("#content-tabs").tabs("getTab", tabContextMenuClickedTargetName);
  	var tabClosable = tab.panel("options").closable;
  	if (tabClosable){
  		var tabIndex = $("#content-tabs").tabs("getTabIndex", tab);
  		if (tabIndex > 0){
  			$("#content-tabs").tabs("close", tabIndex);
  		} else {
  			$.messager.show({ title:'提示信息', msg: '系统首页不可关闭。', timeout:5000, showType: 'show' });
  		}
  	} else {
  		$.messager.show({ title:'提示信息', msg: '该标签页不可关闭。', timeout:5000, showType: 'show' });
  	}
  }

  function closeSelectedTab(){
  	var tab = $("#content-tabs").tabs("getSelected");
  	var tabClosable = tab.panel("options").closable;
  	if (tabClosable){
  		var tabIndex = $("#content-tabs").tabs("getTabIndex", tab);
  		if (tabIndex > 0){
  			$("#content-tabs").tabs("close", tabIndex);
  		} else {
  			$.messager.show({ title:'提示信息', msg: '系统首页不可关闭。', timeout:5000, showType: 'show' });
  		}
  	} else {
  		$.messager.show({ title:'提示信息', msg: '该标签页不可关闭。', timeout:5000, showType: 'show' });
  	}
  }

  function closeOtherTabs(){
  	var tab = $("#content-tabs").tabs("getTab", tabContextMenuClickedTargetName);
  	var tabIndex = $("#content-tabs").tabs("getTabIndex", tab);

  	var tabs = $("#content-tabs").tabs("tabs");
  	for (var i = tabs.length - 1; i > 0; i--){
  		if (i == tabIndex)
  			continue;

  		if(tabs[i].panel("options").closable){
  			$("#content-tabs").tabs("close", i);
  		}
  	}
  	$("#content-tabs").tabs("select", tabIndex);
  }

  function closeAllTabs(){
  	var tabs = $("#content-tabs").tabs("tabs");
  	for (var i = tabs.length - 1; i > 0; i--){
  		if(tabs[i].panel("options").closable){
  			$("#content-tabs").tabs("close", i);
  		}
  	}
  	$("#content-tabs").tabs("select", 0);
  }

  //初始化修改个人信息对话框
  function editProfile(){
  	var editDialog = $("<div></div>").dialog({
  		title: '修改个人信息',
  		width: 900,
  		height: 455,
  		modal: true,
  		iconCls: "fa fa-pencil-square-o",
  		href: '/desktop/toEditProfile',
  		onClose : function() {
              $(this).dialog('destroy');
          },
  		onLoad: function(){
  			$.ajax({
  				url: '/desktop/getLoginUser',
  				type: 'get',
  				dataType: 'json',
  				success: function(data){
  					if (data.headImage != null && data.headImage != ""){
  						$("#profile-head-image").attr("src", "data:image/jpeg;base64," + data.headImage);
  					} else {
  						$("#profile-head-image").attr("src", "/global/img/default_user_icon.png");
  					}
  					if (data.signImage != null && data.signImage != ""){
  						$("#profile-sign-image").attr("src", "data:image/jpeg;base64," + data.signImage);
  					} else {
  						$("#profile-sign-image").remove();
  					}
  					$("#profile-email").textbox('setValue', data.email);
  					$("#profile-phone").textbox('setValue', data.phone);
  					$("#profile-idCard").textbox('setValue', data.idCard);
  					$("#profile-address").textbox('setValue', data.address);
  					if (data.userSettings != null && data.userSettings.defaultMenu != null){
  						$("#profile-defaultMenu").combotree('setValue', data.userSettings.defaultMenu.id);
  						$("#profile-defaultMenu").combotree('setText', data.userSettings.defaultMenu.name);
  					}
  				}
  			});
  		},
  		buttons: [
  			{
  				text: '保存',
  				iconCls: 'fa fa-save',
  				handler: function(){
  					$("#edit-user-profile-form").form('submit', {
  						url: "/desktop/updateProfile",
  						onSubmit: function(){
  							return $(this).form("validate");
  						},
  						success: function(data){
  							data = $.parseJSON(data);
  							if (data.result){
  								editDialog.dialog("destroy");
  								$.messager.alert("提示信息", data.msg, "info");
  								updateUserHeadImage();
  							} else {
  								$.messager.alert("提示信息", data.msg, "error");
  							}
  						}
  					});
  				}
  			}, {
  				text: '关闭',
  				iconCls: 'fa fa-close',
  				handler: function(){
  					editDialog.dialog('destroy');
  				}
  			}
  		]
  	});
  }

  //打开修改密码对话框
  function openEditPasswordDialog(){
  	$("#edit-user-password-dialog").dialog("open");
  	$.parser.parse("#edit-user-password-dialog");
  }

  //提交修改密码表单
  function submitEditPasswordForm(){
  	$("#edit-user-password-form").form('submit', {
  		url: "/desktop/updatePassword",
  		onSubmit: function(){
  			return $(this).form("validate");
  		},
  		success: function(data){
  			data = $.parseJSON(data);
  			if (data.result){
  				$("#edit-user-password-form").form("clear");
  				$("#edit-user-password-dialog").dialog("close");
  				$.messager.alert("提示信息", data.msg, "info");
  			} else {
  				$.messager.alert("提示信息", data.msg, "error");
  			}
  		}
  	});
  }

  function updateUserHeadImage(){
  	$.ajax({
  		url: '/desktop/getLoginUser',
  		type: 'get',
  		dataType: 'json',
  		success: function(data){
  			if (data.headImage != null && data.headImage != ""){
  				$("#index-user-head-image").attr("src", "data:image/jpeg;base64," + data.headImage);
  			} else {
  				$("#index-user-head-image").attr("src", "/global/img/default_user_icon.png");
  			}
  		}
  	});
  }

  function saveTheme(themeName){
  	$.post("/user/saveCustomTheme", { "theme": themeName });
  }

  function getMessage(){
  	$.get("/message/getMsgCount", function(data){
  		if (data > 0){
  			$.messager.show({ title:'提示信息', msg: '有新的系统消息，<a href=\'javascript:openMsg();\'>点击查看</a>', timeout:8000, showType: 'show' });
  		}
  	});
  }

  function openMsg(){
  	addTab("系统消息", "/message/toList?menuId=", "fa fa-envelope-open-o", "iframe");
  }
</script>

<style>
  .banner {
  	font-size: 16px;
  }
  .banner-logo {
  	position: absolute;
  	left: 10px;
  	width: 200px;
  	vertical-align: middle;
  	line-height: 40px;
  }
  .banner-collapsed {
  	position: absolute;
  	left: 210px;
  	width: 20px;
  	font-size: 18px;
  	line-height: 40px;
  	vertical-align: middle;
  	text-align: center;
  }
  .banner-collapsed a {
  	color: #fff;
  }
  .banner-nav {
  	text-align: right;
  	position: absolute;
  	right: 40px;
  	vertical-align: middle;
  	line-height: 40px;
  }
  .banner-nav span {
  	color: #fff;
  }
  .large-panel-header {
  	height: 35px;
  	color: #fff;
  }
  .user-head-image-container {
  	height: 32px;
  	/*float: left;*/
  	border-radius: 50%;
  	border: 0;
  	overflow: hidden;
  }
</style>
